<template>
  <div class="reservation">
    <home-nav :userData='userinfo'></home-nav>
    <div class="container">
      <h3>我的预约单</h3>
      <div class="content">
        <!-- <div class="nav">
          厨师预约单
        </div> -->
        <div class="nav">
          <ul class="left">
            <li :class="['hoverShow',{clickShow:tabStatus==0}]" @click="handleToggle(0)">待审批</li>
            <li :class="['hoverShow',{clickShow:tabStatus==1}]" @click="handleToggle(1)">已审批</li>
            <li :class="['hoverShow',{clickShow:tabStatus==2}]" @click="handleToggle(2)">已结束</li>
            <li><a-button type="primary" @click="gotoReservation">我要预约</a-button></li>
          </ul>
          <a-input-search style="width:25%;" placeholder="可按名称、编号模糊搜索" v-model="valueSearch" @search="handleSearch" />
        </div>
        <a-table
          class="reservation-content"
          :columns="reservationColumns"
          :data-source="reservationData"
          :pagination="pagination"
          size='small'
          @change="pageChange"
        >
          <span slot="status" slot-scope="status">
            <!-- <a-tag color="green">审批</a-tag> -->
            <a-tag
              :color="status === '已审批' ? 'green' : (status === '待审批' ? 'blue' : 'red')"
            >
              {{status}}
            </a-tag>
          </span>
          <template slot="toAudit" slot-scope="text, record">
            <a-button type="primary" size="small" @click="handledispose(record)">处理</a-button>    
          </template>
        </a-table>
      </div>
    </div>

    <a-modal v-model="visibleYu" title="请选择预约类型" @ok="handleOkYu">
       <a-radio-group v-model="yuTypeValue">
        <a-radio :value="1">
          厨师预约
        </a-radio>
        <a-radio :value="2">
          设备预约
        </a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import {getAction} from '@/api/manage'
export default {
  components:{
    'HomeNav': () => import('@/components/layouts/HomeNav'),
  },
  data () {
    return {
      userinfo:{
          info:this.$store.getters.userInfo,
          module:'myreservation',
      },
      url:{
        getTodoList:'/home/queryToAppointment',
      },
      tabStatus:0,
      pagination:{
        total:0,
        current:1
      },
      currPageIndex:1,
      currPageSize:10,
      valueSearch:'',
      reservationColumns:[
        {
          title: '类型',
          dataIndex: 'type',
          width: '15%',
          align:'left'
        },
        {
          title: '名称',
          dataIndex: 'projectName',
          width:'30%',
          align:'left'
        },
        {
          title: '编号',
          dataIndex: 'projectNo',
          width:'15%',
          align:'center'
        },
        {
          title: '提交时间',
          dataIndex: 'submitTime',
          width:'10%',
          align:'center'
        },
        {
          title: '状态',
          key: 'status',
          align:'center',
          dataIndex: 'status',
          width:'10%',
          scopedSlots: { customRender: 'status' },
        },
        { title: '操作', 
          dataIndex: 'url',  
          width:'10%',
          align:'center',
          scopedSlots: { customRender: 'toAudit' } 
        }
      ],
      reservationData:[],
      visibleYu: false,
      yuTypeValue: ''
    }
  },
  mounted () {
    this.getTodoListData()
  },
  methods: {
    getTodoListData(){
      getAction(this.url.getTodoList,{pageSize:this.currPageSize,pageNo:this.currPageIndex,status:this.tabStatus,keyword:this.valueSearch,column:"submitTime",order:"desc"}).then(res=>{
        if(res.code==200){
          this.pagination.total = res.result.total;
          this.reservationData =res.result.records.map((item,index)=>{
            item.key=index
            if(!item.newFlag){
              item.url=this.HTE_OLD_SERVER_URL+`${item.url}bootToken=${Vue.ls.get(ACCESS_TOKEN)}${item.params}`
              return item
            }else{
              return item
            }
          })
        }else{
          this.$message.warning('数据加载失败');
          console.log(res.message)
        }
      })
    },
    handleToggle(index){
      this.tabStatus=index
      this.pagination.current=1
      this.currPageIndex=1;
      this.getTodoListData()
    },
    handleSearch(){
      this.getTodoListData()
    },
    handledispose(record){
      if(!record.newFlag){
        window.open(record.url,"_blank")
      }else{
        let urlJump = this.$router.resolve({path: record.url });
        window.open(urlJump.href,"_blank")
      }
    },
    pageChange(page){
      this.currPageIndex=page.current;
      this.currPageSize=page.pageSize;
      this.pagination.current=page.current
      this.getTodoListData();
    },
    gotoReservation () {
      this.visibleYu = true;
      this.yuTypeValue = '';
    },
    handleOkYu () {
      if (!this.yuTypeValue) {
        this.$message.warning('请选择预约类型');
        return
      }
      console.log(this.yuTypeValue)
      this.visibleYu = false;

      if (this.yuTypeValue == '1') {
        window.open(this.HTE_OLD_SERVER_URL+`/cookAppointmentList/list?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`); 
      } else {
        window.open(this.HTE_OLD_SERVER_URL+`/appoint/toAppointList?bootToken=${ Vue.ls.get(ACCESS_TOKEN)}`); 
      }
    }
  },
};
</script>
<style lang="less" scoped>
.reservation{
  background-color: #f5f5f5;
  height: 100%;
  .container{
    padding:30px 125px;
    background-color: #f5f5f5;
    h3{
      font-size: 18px;
      font-weight: 600;
    }
    .content{
      background-color: #fff;
      padding: 20px;
      margin-top: 20px;
      .nav{
        border-bottom: 1px solid #f6f7f8;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        .left{
          list-style: none;
          display: flex;
          padding: 0;
          margin: 0;
          align-items: center;
          font-size: 15px;
          font-weight: 600;
          margin-bottom: -3px;
          li{
            padding: 10px;
            &.hoverShow{
              cursor: pointer;
              border-bottom: 3px solid rgba(255,255,255,0);
              width: 85px;
              text-align: center;
              &:hover{
                border-bottom: 3px solid #0988dc;
              }
            }
            &.clickShow{
              color: #0988dc;
              border-bottom: 3px solid #0988dc;
            }
          }
        }
      }
      .reservation-content{
        margin-top: 20px;
        /deep/ .ant-table-small{
          border: unset;
          border-radius: unset;
        }
        /deep/ .ant-table-thead > tr > th{
          border: unset;
          border-radius: unset;
        }
        /deep/ .ant-table-thead{
          background-color:#f6f7f9 ;
        }
        /deep/ .ant-table-small > .ant-table-content > .ant-table-body{
          margin: 0;
        }
      }
    }
  }
}
</style>
